import { SchemaManage } from '@/components/SchemaComponent';
import { ManageCommonAPI } from '@/pages/type';
import { useMemo, useRef, useState } from 'react';
import { connect } from 'umi';
import { warnManageService } from '../services';
import { getTableColumns } from '../mconfig';
import { DetailViewModal } from './DetailViewModal';
import '../common/style.less';

const WarnManageView: React.FC<WarnManageAPI.IManageType> = ({ curRes }) => {
  /** 管理页ref */
  const schemaManageRef: any = useRef();

  /**  获取管理页数据 */
  const { data, loading, pagination, searchList, getWarnData, reloadRefresh } = warnManageService(curRes);

  /** 查看详情页面  */
  const [detailModalState, setDetailModalState] = useState<Record<string, any>>({
    isShowModal: false,
    checkRowsInfo: {},
  });

  /**  重置搜索表单方法 */
  const onReset = (values: any) => {
    getWarnData({ ...values });
  };

  /**  搜索列表 */
  const onSearch = (request: ManageCommonAPI.IGridRequestType) => {
    getWarnData({ ...request });
  };

  /** 分页change 方法 */
  const onPageChange = (current: any, pageSize: any, params: any) => {
    getWarnData({ pageSize, current, ...params });
  };

  /** 刷新管理页面 */
  const reloadManage = () => {
    reloadRefresh();
  };

  /** 表格操作按钮点击方法 */
  const onOptClick: WarnManageAPI.IOperationClick = {
    /**查看 */
    onView: (resObj) => {
      setDetailModalState({
        isShowModal: true,
        checkRowsInfo: resObj,
      });
    },
  };

  /** 获取columns方法 */
  const columns: Record<string, any>[] = useMemo(() => {
    return getTableColumns(curRes, onOptClick);
  }, [curRes]);

  return (
    <div
      style={{
        position: 'relative',
        overflow: 'hidden',
        height: '100%',
        width: '100%',
      }}
    >
      <SchemaManage
        ref={schemaManageRef}
        searchProps={{
          switchList: [],
          searchList,
          onSwitch: () => {},
          onReset,
          onSearch,
        }}
        actionList={[]}
        tableProps={{
          columns,
          dataSource: data?.rows,
          loading,
          pagination: pagination as any,
          rowKey: 'id',
          onPageChange, //分页onchange
        }}
      />

      {/* 详情弹框 */}
      {detailModalState?.isShowModal && (
        <DetailViewModal
          onClose={() => {
            setDetailModalState({
              isShowModal: false,
              checkRowsInfo: {},
            });
          }}
          checkRowsInfo={detailModalState?.checkRowsInfo}
          reloadManage={reloadManage}
          curRes={curRes}
        />
      )}
    </div>
  );
};

export default connect(({ baseLogin }: Record<string, any>) => ({
  curRes: baseLogin?.permissions,
}))(WarnManageView);
